<template>
  <div class="map-container">
    <div class="menu-left">
      <div class="left-head-container">
        <weather />
        <div class="equipment-box">
          <div v-for="(item, index) in equipmentData" :key="index" class="item-box">
            <img :src="item.img" class="icon-head">
            <div class="item-content">
              <div>{{ item.desc }}</div>
              <div>{{ item.total }}</div>
            </div>
            <div class="nums">
              <img class="icon" :src="item.status ? getImg('up.png') : getImg('down.png')">
              <div class="gain" :style="{ color: item.status ? '#FFD15C' : '#3BDD68' }">
                {{ item.percent }}%
              </div>
            </div>
          </div>
          <div class="content">
            <img :src="getImg('title-icon.png')">
            最新广播内容
          </div>
          <div class="broadcast-content">
            {{ broadcastContent }}
          </div>
        </div>
      </div>

      <div class="left-head-container" style="margin-top: 16px;">
        <div class="title-box">
          <div class="title-content">
            <div>设备使用情况</div>
            <div>ASDASDASDAS</div>
          </div>
          <Select class="selector">
            <Option v-for="(item, index) in selectorData" :value="item" :key="index">{{ item }}</Option>
          </Select>
        </div>
        <div class="bottom-chart">
          <div class="upper-box">
            <div class="charts-title-box">
              <div class="item" v-for="(item, index) in deviceUsingData" :key="index">
                <div>
                  <img :src="item.img">
                  <span>{{ item.text }}</span>
                </div>
                <div class="number">{{ item.number }}</div>
              </div>
            </div>
            <div class="charts-box">
              <div v-for="item in 3" :key="item" ref="lineChart">

              </div>
            </div>
          </div>

          <div class="bottom-box">
            <div>
              <img :src="getImg('title-icon.png')" alt="" srcset="">
              报警统计
            </div>
            <div ref="barChart"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="menu-right">
      <div class="right-head-container">
        <div class="title-box">
          <div class="title-content">
            <div>设备在线情况</div>
            <div>ADADADASDA</div>
          </div>
        </div>
        <div class="table-header">
          <div>设备名称</div>
          <div>设备状态</div>
        </div>
        <div class="scroll-container">
          <div class="under-container">
            <vue3-seamless-scroll v-bind="defaultOption" :list="scrollData" class="scroll" :hover="true">
              <div class="table-item" v-for="(item, index) in scrollData" :key="index">
                <div>{{ item.name }}</div>
                <div>
                  <div :class="item.status ? 'correct' : 'incorrect'"></div>
                  {{ item.status ? '在线' : '离线' }}
                </div>
              </div>
            </vue3-seamless-scroll>
          </div>
        </div>
      </div>
    </div>

    <serve :menuTopData="menuTopData" :menuBottomLeftData="menuBottomLeftData" />
  </div>
</template>

<script setup>
import { nextTick, onMounted, computed, reactive, ref, getCurrentInstance,onUnmounted } from 'vue';
import { useData } from "@/utils/useData.js"
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
const { getImg, weather, echarts, serve, map, timer, pieActive, store } = useData()
const { proxy } = getCurrentInstance();

//网点组件和数据
const menuTopData = reactive([
  {
    img: getImg('sbjrs.png'),
    title: '终端接入数',
    num: 32,
  },
  {
    img: getImg('sbzxs.png'),
    title: '终端在线数',
    num: 18,
  },
  {
    img: getImg('sblis.png'),
    title: '终端离线数',
    num: 6,
  },
  {
    img: getImg('zj.png'),
    title: '终端故障数',
    num: 6,
  },
])
const menuBottomLeftData = reactive([
  {
    img: getImg('rcgb-icon.png'),
    title: '日常广播',
  },
  {
    img: getImg('yjgb-icon.png'),
    title: '应急广播',
  },
  {
    img: getImg('qtgb-icon.png'),
    title: '其他广播',
  },
])

//点坐标
const pointList = reactive([
  /*龙泉驿区政府 */
  {
    location: '龙泉驿区',
    lngLat: [104.27536, 30.556808],
    img: 'fwwd.png',
    phone: '15394612646',
    specificLocaltion: '四川省成都市龙泉驿区',
  },

  /* 龙泉街道办事处 */
  {
    location: '龙泉街道办',
    lngLat: [104.265402, 30.562251],
    type: 1,
    online: 1,
    img: 'excel_11.png',
    phone: '15394613646',
    specificLocaltion: '四川省成都市龙泉街道办事处',
  },

  /* 洛带古镇 */
  {
    location: '洛带古镇',
    lngLat: [104.328033, 30.635452],
    type: 0,
    online: 1,
    img: 'excel_12.png',
    phone: '15395613646',
    specificLocaltion: '洛带古镇',
  },
  /* 十陵镇 */
  {
    location: '十陵镇',
    lngLat: [104.172438, 30.645829],
    type: 2,
    online: 0,
    img: 'excel_13.jpg',
    phone: '15294613646',
    specificLocaltion: '四川省成都市十陵镇',
  },
  /* 百工堰 */
  {
    location: '百工堰',
    lngLat: [104.298105, 30.568214],
    type: 2,
    online: 1,
    img: 'excel21.png',
    phone: '15294613646',
    specificLocaltion: '四川省成都市百工堰',
  }

])


const icons = reactive({
  marker: "five-star.png",
  rcgbIcon: "rcgb-icon.png",
  yjgbIcon: "yjgb-icon.png",
  qtgbIcon: "qtgb-icon.png",
})

//右侧滚动数据
const scrollData = reactive([
  {
    name: '移民村一组',
    status: 1,
  },
  {
    name: '白虎村村头',
    status: 0,
  },
  {
    name: '移民村二组',
    status: 1,
  },
  {
    name: '白虎村村头',
    status: 1,
  },
  {
    name: '移民村二组',
    status: 1,
  },
  {
    name: '白虎村村头',
    status: 1,
  },
  {
    name: '移民村二组',
    status: 1,
  },
  {
    name: '白虎村村头',
    status: 1,
  },
  {
    name: '移民村二组',
    status: 1,
  },
  {
    name: '白虎村村头',
    status: 1,
  },
  {
    name: '移民村二组',
    status: 1,
  },
  {
    name: '白虎村村头',
    status: 1,
  },
  {
    name: '移民村二组',
    status: 1,
  },
  {
    name: '白虎村村头',
    status: 1,
  },

])

//滚动配置
//定义左侧滚动对象
const defaultOption = reactive({
  step: 0.2

})

//点标记方法
const addPoint = () => {
  let content = ""
  //点坐标数组
  let maker_arr = []
  pointList.forEach(point => {
    if (point.type == 0) {
      content =
        `<div><img style="width: 42px;height: 58px" src="${getImg(icons.rcgbIcon)}"/></div>`;
    } else if (point.type == 1) {
      content =
        `<div><img style="width: 42px;height: 58px" src="${getImg(icons.yjgbIcon)}"/></div>`;
    } else {
      content =
        `<div><img style="width: 42px;height: 58px" src="${getImg(icons.qtgbIcon)}"/></div>`;
    }
    if (point.location === '龙泉驿区') {
      content =
        `<div><img src="${getImg(icons.marker)}"/></div>`;
    }
    //点坐标对象
    let marker = new AMap.Marker({
      map: map.value,
      position: point.lngLat,
      content: content,
      extData: point
    })
    //保存当前页面点坐标信息
    maker_arr.push(marker)
    //点击事件
    marker.on('click', (e) => {
      console.log(e, 'ee');
      //展示框信息
      initInfoWindow(e.target)
    })

  })
  //保存点坐标数组
  store.commit("SETMAKER", maker_arr)

}

//信息窗口方法
const initInfoWindow = (marker) => {
  let extData = marker.getExtData()
  console.log(extData, 'eeexxx');
  let content = ` <div class="model">
                  <img class="pointLine" src="${getImg('pointLine.png')}"/>
            <div class="button" onclick="closeWindow()">
                <img src="${getImg('close-icon.png')}"/>
            </div>
            <div style="margin: 15px 10px">
                <div class="title">${extData.location}广播</div>
            </div>
            <img class="image" src="${getImg(extData.img)}"/>
            <div class="location-text">
                <div>设备位置：<span>${extData.specificLocaltion}</span></div>
                <div>在线状态：<span>${extData.online ? '在线' : '离线'}</span></div>
            </div>
        </div>`
  let infoWindow = new AMap.InfoWindow({
    isCustom: true,
    content: content,
    //鼠标点击地图后关闭
    closeWhenClickMap: true,
    autoMove: true,
    //偏移量
    offset: new AMap.Pixel(400, -172)

  })
  //保存信息窗口
  store.commit("SETINFOWINDOW", infoWindow)
  //启动信息窗口 传入地图对象和位置
  infoWindow.open(map.value, marker.getPosition())
}

//初始化放啊
const init = () => {
  addPoint()
  initEchart1()
  initBarChart()
}

//左侧广播数据
const equipmentData = reactive([
  {
    img: getImg('camera-icon.png'),
    desc: '广播覆盖面积(km²)',
    total: 3571549,
    status: 1,
    percent: 3,
  },
  {
    img: getImg('trumpet-icon.png'),
    desc: '广播覆盖人口(万人)',
    total: 218.16,
    status: 1,
    percent: 14,
  },

])
const broadcastContent = ref('西河街道通过“1点位1人”机制,实现“动态+静态”督查方式,开展“三个乱”行为整改200余起,清理市容乱象5000余次,拆除违建2000余平方米,实施植绿遮挡7000平方米,动态整治现场树木移植、田形调整等现实乱象，形成“全链条”管治，“无死角”管控。')

//左侧下拉数据
const selectorData = reactive(['全部', '当日', '近30天', '近90天', '近一年'])

//设备使用情况
const deviceUsingData = reactive([
  {
    img: getImg('yj.png'),
    text: '应急广播（起）',
    number: 6
  },
  {
    img: getImg('rc.png'),
    text: '日常广播（起）',
    number: 14
  },
  {
    img: getImg('qt.png'),
    text: '其他广播（起）',
    number: 11
  },
])

//设备图表使用方法
const initEchart1 = () => {
  for (let i = 0; i < 3; i++) {
    let dataList = [
      {
        value: '11',
      },
      {
        value: '11'
      },
      {
        value: '9'
      },
      {
        value: '10'
      },
      {
        value: '12'
      },
      {
        value: '9'
      },
      {
        value: '11'
      },
      {
        value: '12'
      }
    ]
    i == 0 ? dataList = dataList.reverse() : ''
    let sortProperty = function (property) {
      return function (obj1, obj2) {
        return obj1[property] - obj2[property]
      }
    }
    if (i == 1) {
      dataList.sort(sortProperty('value'))
    } else if (i == 2) {
      dataList.sort(sortProperty('value')).reverse()
    }
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'none'
        }
      },
      dataZoom: [{
        type: 'inside',
        start: 0,
        end: dataList.length > 15 ? 35 : 100
      }],
      xAxis: {
        show: false,
        data: ['', '', '', '', '', '', '', '']
      },
      yAxis: {
        show: false,
        splitNumber: 1
      },
      series: [{
        name: '起',
        type: 'line',
        smooth: true,
        showSymbol: false,
        itemStyle: {
          color: '#44FFDD',
        },
        lineStyle: {
          width: 4,
        },
        areaStyle: {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: "rgba(58,182,224, 0.6)"
              }, {
                offset: 0.6,
                color: "rgba(58,182,224, 0.2)"
              },
              {
                offset: 0.8,
                color: "rgba(58,182,224, 0.1)"
              }
              ]
            },

          }
        },

        data: dataList
      },

      ]
    };
    let chart = proxy.$refs['lineChart'][i];
    let myChart = echarts.init(chart);
    myChart.setOption(option);
    pieActive(myChart, option)
  }
}

//报警图标方法
const initBarChart = () => {
  // xdata
  let xData = ['缺省', '蓝(一般)', '黄(较大)', '橙(重大)', '红(特别重大)']
  // ydata
  let yData = [25, 17, 11, 14, 11]
  // pictorialData
  let pictorialData = []
  yData.map(v => { pictorialData.push({ value: v, symbolPosition: 'end' }) })


  let option = {
    tooltip: { trigger: 'axis' },
    grid: {
      left: 45,
      top: 20,
      right: 5,
      bottom: 25,
    },
    xAxis: [{
      type: 'category',
      data: xData,
      axisTick: { show: false },
      axisPointer: { type: 'shadow' },
      axisLabel: { fontSize: '80%', color: "#fff" },
      axisLine: {
        show: false,
      },

    }],
    yAxis: [{
      type: 'value',
      name: '',
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255,255,255, .1)'
        }
      },
      axisLabel: { fontSize: '80%', color: "#fff" },
      axisLine: { show: false },
      axisTick: { show: false }
    }],
    series: [
      {
        type: 'bar',
        barWidth: 10,
        data: yData,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(0, 85, 255, 0.0001)'
            }, {
              offset: 1,
              color: '#0783FA'
            }],
          }
        }
      },
      {
        type: 'pictorialBar',
        symbol: 'rect',
        symbolSize: [10, 3],
        symbolOffset: [0, 0],
        itemStyle: {
          color: '#0783FA',
        },
        tooltip: { show: false },
        data: pictorialData
      }
    ]
  }
  let chart = proxy.$refs[`barChart`];
  let myChart = echarts.init(chart);
  myChart.setOption(option);
  pieActive(myChart, option)
}

onMounted(() => {
  nextTick(() => {
    init()
  })
})

onUnmounted(() => {
  clearInterval(timer)
  store.dispatch('resetMap')
})
</script>
<style lang="less" scoped>
.menu-left {
  position: absolute;
  top: 94px;
  left: 20px;
  height: 970px;
  width: 400px;
  margin-right: 16px;
  display: inline-block;

  .left-head-container {
    border-radius: 8px;
    background-color: #11387052;
    overflow: hidden;

    .equipment-box {
      margin: 0px 20px 20px 20px;

      .item-box {
        display: flex;

        .item-content {
          margin-left: 5px;

          div:nth-child(1) {
            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #FFFFFF;
          }

          div:nth-child(2) {
            font-family: 'Furore';
            font-style: normal;
            font-weight: 400;
            font-size: 36px;
            line-height: 41px;
            color: #F2F6FA;
            margin: 5px 0;
          }

          div:nth-child(3) {
            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: rgba(255, 255, 255, 0.64);
          }
        }

        .icon-head {
          width: 66px;
          height: 66px;
          margin-right: 10px;
        }

      }

      .content {
        text-align: left;
        margin: 5px 20px 5px 20px;
        color: #B4C0CC
      }

      img {
        margin-right: 5px;
      }
    }
  }

}

.nums {
  font-family: 'Furore';
  font-style: normal;
  font-weight: 400;
  font-size: 50px;
  line-height: 56px;
  color: #F2F6FA;
  display: flex;
  align-items: center;

  .icon {
    margin: 10px 10px 0 10px;
    width: 25px;
    height: 25px;
  }

  .gain {
    margin-top: 10px;
    font-family: 'DIN';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 29px;
  }
}

.broadcast-content {
  padding: 5px;
  border-radius: 8px;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 25px;
  color: #B4C0CC;
  background-color: #244A8152;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.bottom-chart {
  .upper-box {
    display: flex;
    justify-content: space-between;

    .charts-title-box {
      padding: 10px;

      .item>div {
        span {
          font-family: 'Source Han Sans CN';
          font-style: normal;
          font-weight: 400;
          font-size: 16px;
          line-height: 22px;
          color: #B4C0CC;
        }

        img {
          width: 36px;
          height: 36px;
          vertical-align: middle;
        }
      }

      .number {
        padding-left: 40px;
        text-align: left;
        font-family: 'Furore';
        font-style: normal;
        font-weight: 400;
        font-size: 32px;
        line-height: 37px;
        color: #F2F6FA;
      }
    }

    .charts-box {
      div {
        padding-left: 10px;
        width: 220px;
        height: 90px;
      }
    }
  }

  .bottom-box {
    div:nth-child(1) {
      text-align: left;
      margin: 5px 20px 5px 20px;
      color: #B4C0CC;

      img {
        margin-right: 5px;
      }
    }

    div:nth-child(2) {
      height: 120px
    }

  }
}

.menu-right {
  position: absolute;
  top: 94px;
  right: 20px;
  height: 970px;
  display: inline-block;
  width: 400px;

  .right-head-container {
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    background-color: #11387052;

    .table-header {
      margin: 20px 20px 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: rgba(255, 255, 255, 0.82);
      font-size: 14px;
    }
  }

}

.correct {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #3BDD68;
  line-height: 0;
  font-size: 0;
  vertical-align: middle;
  position: relative;

  &::before {
    @h: calc(~'100% - 90%');
    @w: calc(~'100% - 40%');
    display: block;
    content: '';
    height: @h;
    width: @w;
    background-color: #244a81;
    border-radius: calc(~'100px / 2.5');
    transform: rotateZ(316deg);
    position: absolute;
    top: calc(~'100% - 49%');
    right: calc(~'100% - 87%');
  }

  &::after {
    @h: calc(~'100% - 90%');
    @w: calc(~'100% - 70%');
    display: block;
    content: '';
    height: @h;
    width: @w;
    background-color: #244a81;
    border-radius: calc(~'100px / 2.5');
    transform: rotateZ(59deg);
    position: absolute;
    top: calc(~'100% - 42%');
    right: calc(~'100% - 50%');
  }
}

/* 小图标✕ */
.incorrect {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #D93E3E;
  line-height: 0;
  font-size: 0;
  vertical-align: middle;
  position: relative;

  &::before {
    @h: calc(~'100% - 90%');
    @w: calc(~'100% - 40%');
    display: block;
    content: '';
    height: @h;
    width: @w;
    background-color: #244a81;
    border-radius: calc(~'100px / 2.5');
    transform: rotateZ(317deg);
    position: absolute;
    top: calc(~'100% - 54%');
    right: calc(~'100% - 81%');
  }

  &::after {
    @h: calc(~'100% - 90%');
    @w: calc(~'100% - 40%');
    display: block;
    content: '';
    height: @h;
    width: @w;
    background-color: #244a81;
    border-radius: calc(~'100px / 2.5');
    transform: rotateZ(42deg);
    position: absolute;
    top: calc(~'100% - 53%');
    right: calc(~'100% - 79%');
  }
}

.scroll-container {
  overflow: hidden;
  margin: 0px 20px 0px 20px;

  .under-container {
    height: 100%;
    margin-bottom: 20px;

    .table-item {
      margin-bottom: 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;

      div:nth-child(2) {
        margin-right: 15px;
      }
    }
  }

}
</style>